/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/


.noneSelect () {
    touch-callout: none;
    -o-touch-callout: none;
    -moz-touch-callout: none;
    -webkit-touch-callout: none;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.opacityStyle(@op:60)
{
	filter:alpha(opacity=@op);
	-moz-opacity:@op/100;
	-khtml-opacity:@op/100;
    -webkit-opacity: @op/100;
	opacity:@op/100;
}

.borderRadius (@value: 3px) {
    border-radius: @value;
    -moz-border-radius: @value;
    -webkit-border-radius: @value;
}
.borderRadiusTop (@value: 3px) {
    border-top-left-radius: @value;
    border-top-right-radius: @value;
    -moz-border-radius-topleft: @value;
    -moz-border-radius-topright: @value;
    -webkit-border-top-left-radius: @value;
    -webkit-border-top-right-radius: @value;
    -khtml-border-top-left-radius: @value;
    -khtml-border-top-right-radius: @value;
}
.borderRadiusBottom (@value: 3px) {
    border-bottom-left-radius: @value;
    border-bottom-right-radius: @value;
    -moz-border-radius-bottomleft: @value;
    -moz-border-radius-bottomright: @value;
    -webkit-border-bottom-left-radius: @value;
    -webkit-border-bottom-right-radius: @value;
    -khtml-border-bottom-left-radius: @value;
    -khtml-border-bottom-right-radius: @value;
}


.borderButtons (@colorValue: #000) {
    border-width: 1px;
    border-style: solid;
    border-color: @colorValue;
}
.shadow (@radius:6px) {
    box-shadow: 0 2px @radius rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px @radius rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:0 2px @radius rgba(0, 0, 0, 0.3);
}

.shadowFullCustomizable (@byX: 0, @byY: 2px, @radius: 4px, @color: rgba(0, 0, 0, 0.5)) {
    box-shadow: @byX @byY @radius @color;
    -moz-box-shadow: @byX @byY @radius @color;
    -webkit-box-shadow: @byX @byY @radius @color;
}

.boxShadow (@blurRadius: 4px) {
    background: #FFF;
    border: 1px solid #D1D1D1;
    .shadow(@blurRadius);
}

// Text overflow
// Requires inline-block or block for proper styling
.textOverflowEllipsis () {
    text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis;
}
.text-overflow () {
   overflow: hidden;
   white-space: nowrap;
   .textOverflowEllipsis();
}

.linkStyle (@colorLink: #333){
    color:@colorLink;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.textStyle (@colorText: #333, @sizeText: 12px){
    color: @colorText;
    font-size: @sizeText;
}

.textDotted (){
    border-bottom:1px dotted;
    text-decoration:none;
}


.textButtonsStyle (@colorValue: #FFF) {
    color: @colorValue;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;

    &:hover,
    &:active {
      color: @colorValue;
    }
}

.resetListStyle (@marginValue: 0, @paddingValue: 0) {
    list-style: none;
    list-style-type: none;
    margin: @marginValue;
    padding: @paddingValue;
}

.arrow-down (@size, @bg) {
    border-left: @size solid transparent;
    border-right: @size solid transparent;
    border-top: @size solid @bg;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
}
.arrow-close (@size, @bg) {
    border-left: @size solid @bg;
    border-bottom: @size solid transparent;
    border-top: @size solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
}
// Gradient
// -------------------------

#gradient {
 
  // Horizontal gradient, from left to right
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .horizontal(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
    background-color: @end-color;
    background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
    background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
  }
 
  // Vertical gradient, from top to bottom
  //
  // Creates two color stops, start and end, by specifying a color and position for each color stop.
  // Color stops are not available in IE9 and below.
  .vertical(@start-color: #555, @start-percent: 0%, @end-color: #333, @end-percent: 100%) {
    background-color: @end-color;
    background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
    background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
  }
 }

.bg-vertical-gradient(@start-color, @end-color) {
    #gradient > .vertical(@start-color, 0%, @end-color, 100%);
 }

.bg-horizontal-gradient(@start-color, @end-color) {
    #gradient > .horizontal(@start-color, 0%, @end-color, 100%);
 }

.limitedSingleText(@maxWidth) {
    display: inline-block;
    max-width: @maxWidth;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.img-rotate(@time:1.3s)
{
    -webkit-animation:spin @time linear infinite;
    -moz-animation:spin @time linear infinite;
    animation:spin @time linear infinite;
}

.customApearance (@value: none){
   -webkit-appearance: @value;
   -moz-appearance:    @value;
   appearance:         @value;
}

.rotateTransform(@deg) {
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -ms-transform: rotate(@deg);
    -o-transform: rotate(@deg);
}